import React from "react";
import {Consumer} from "../../theme";
import './index.less';
import {WeaLocaleProvider} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;

export default class FBHeaderView extends React.Component {
    render() {
      const { shortkey, data, ...props} = this.props;

        return (
            <Consumer ecId={`${this && this.props && this.props.ecId || ''}_Consumer@0qdihx`}>
                {({header, title}) => (
                    <div
                        {...props}
                        className='wev-edc-form-header__view'
                    >
                      {
                        header.visible ?
                          (
                            header.type == 0 ?
                              <div className='fheader-banner' style={header.css}><span>{formatMultiLang(header.text)}</span></div>
                              :
                              <div className='fheader-banner-img' style={{backgroundColor: header.css.backgroundColor, textAlign: header.css.textAlign, fontSize: '0'}}><img src={header.img}/></div>
                          )
                          : null
                      }
                        {data.title && <p className='fheader-title' style={title.css}>{formatMultiLang(data.title)}</p>}
                        {data.desc && <p className='fheader-desc' dangerouslySetInnerHTML={{__html: data.desc}}/>}
                    </div>
                )}
            </Consumer>
        );
    }
}

FBHeaderView.defaultProps = {
    data: {
        title: getLabel('502504', '新的表单'),
        desc: ''
    }
};